// 基于 axios 封装的请求模块
import axios from 'axios'
import store from '@/store'
import router from '@/router'
// 创建一个新的axios实例
// 可以根据不同的需求，封装不同的请求，更加灵活
const ajax = axios.create({
  baseURL: 'http://toutiao.itheima.net' // 基地址
})

// 添加请求拦截器,对token做统一处理
// 请求到达服务器之前 必须经过请求拦截器 它可以对请求参数做统一处理
// 比如：在请求头上携带token给后台
ajax.interceptors.request.use(config => {
  // 对token做统一处理，如果vuex中有token，则在请求头中通过 Authorization字段携带给后台
  if (store.state.token) {
    // 'Bearer '+ store.state.token
    config.headers.Authorization = `Bearer ${store.state.token}`
  }
  // console.log(config)
  return config
}, error => {
  return Promise.reject(error)
})

// 添加响应拦截器  可以对返回数据 或者 错误（token过期）做统一处理
// 可以在成功的时候对data的格式 做统一处理(比如在组件上写一层data)
// 它可以在失败的回调中
ajax.interceptors.response.use(res => { // http 状态以2xx或3xx开头，执行成功的回调
  // console.log(res)
  // res.data 直接返回给组件，目的是让组件拿到数据后少写一层data
  // res.data.data 少写两层data
  return res
}, error => { // http 状态以4xx或5xx开头，执行失败的回调
  console.dir(error)
  // 401就是一个典型的失败，表示token过期或者无效
  // token过期的解决办法,两种
  // 1.重新登录
  // 2.token续签(配合refresh_token解决)
  if (error.response.status === 401) {
    // 1.清空vuex中的token
    store.commit('setToken', '')
    // 2.跳转在登录页在重新登录
    // 3.怎么让用户登陆成功，自动跳转到上次token过期页面
    router.replace({
      path: '/login?from=' + router.currentRoute.path
    })
  }
  return Promise.reject(error)
})
// 导出自定义函数, 参数对象解构赋值
export default ajax

// 以后换库, 只需要改这里, 逻辑页面不用动, 保证代码的复用性和独立性(高内聚低耦合)
//   return $.ajax({
//     url: url,
//     type: method,
//     data: data,
//     header: headers
//   })
// }
